<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<h:head>
	<title>Listado de Celulares</title>
	<link href="./../css/styles.css" rel="stylesheet" type="text/css"/> 
	<script src="./js/validacionesListadoCelular.js" type="text/javascript"></script>
</h:head>
<h:body>

	<h2><h:outputText value="Listado de Celulares"/></h2>
	
	<hr/>
   	
    <h:form id="mntCelulares" >
    
    	<h:messages style="color:red;margin:8px;" />
    
    	<table width="100%" >
    	
    		<tr>
    			<td colspan="2" align="center">
    				<table>
    					<tr>
			    			<td width="50px"><h:outputText value="Nombre"></h:outputText></td>
			    			<td width="300px"><h:inputText id="txtNombre" value="#{celularBean.nombre}"></h:inputText> </td>
			    		</tr>
			    		
			    		<tr>
			    			<td><h:outputText value="Marca"></h:outputText></td>
			    			<td><h:inputText id="txtMarca" value="#{celularBean.marca}"></h:inputText></td>
			    		</tr>
			    		
			    		<tr>
			    			<td><h:outputText value="Modelo"></h:outputText></td>
			    			<td><h:inputText id="txtModelo" value="#{celularBean.modelo}"></h:inputText></td>
			    		</tr>
    				</table>
    			</td>
    		</tr>
    		
    		<tr>
    			<td colspan="2" align="center">
    				<table>
    					<tr>
    						<td>
    							<h:commandButton id="btnGuardar" value="Agregar" 
		    						styleClass="class_submit"
		    						action="#{celularBean.agregar}"
		    						onclick="if (!validaForm()){return false;};"></h:commandButton> 
    						</td>
    						<td>
    							<h:commandButton id="btnModificar" value="Modificar" 
		    						styleClass="class_submit"
		    						action="#{celularBean.agregar}"
		    						onclick="if (!validaForm()){return false;};"></h:commandButton> 
    						</td>
    					</tr>
    				</table>
    			</td>
    		</tr>
    		
    		<tr>
    			<td colspan="2"> <hr/> </td>
    		</tr>
    		
    		<tr>
    			<td colspan="2" align="center">
    			<h:dataTable value="#{celularBean.listaCelulares}" 
		    		var="cel" rowClasses="tableRowOdd"
				   headerClass="tableHeadRow">
				   <!-- 
				  <h:column headerClass="col1" >    				
				      <f:facet name="header">Id</f:facet>    				
				      #{cel.id}
				   </h:column>
				    -->
				   <h:column headerClass="col1" >    				
				      <f:facet name="header">Nombre</f:facet>    				
				      #{cel.nombre}
				   </h:column>
				   <h:column headerClass="col2">
				      <f:facet name="header">Marca</f:facet>
				      #{cel.marca}
				   </h:column>
				   <h:column headerClass="col3">
				      <f:facet name="header">Modelo</f:facet>
				      #{cel.modelo}
				   </h:column>
				   <h:column headerClass="col4">
				      <f:facet name="header">Eliminar</f:facet>
				      <h:commandLink action="#{celularBean.eliminar(cel.id)}">
				      	Eliminar
			      		</h:commandLink>
				   </h:column>
				</h:dataTable>
    			</td>
    		</tr>
    		
    	</table>

    </h:form>
    
</h:body>

</html>